<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五子棋游戏</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: #f5f5dc;
            margin: 0;
            padding: 20px;
        }
        
        h1 {
            color: #8b4513;
            margin-bottom: 10px;
        }
        
        .game-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 20px;
        }
        
        .board {
            display: grid;
            grid-template-columns: repeat(15, 30px);
            grid-template-rows: repeat(15, 30px);
            background-color: #deb887;
            border: 2px solid #8b4513;
            position: relative;
        }
        
        .cell {
            width: 30px;
            height: 30px;
            box-sizing: border-box;
            position: relative;
            cursor: pointer;
        }
        
        .cell:hover {
            background-color: rgba(139, 69, 19, 0.2);
        }
        
        .cell::before, .cell::after {
            content: '';
            position: absolute;
            background-color: #8b4513;
        }
        
        .cell::before {
            width: 100%;
            height: 1px;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
        }
        
        .cell::after {
            width: 1px;
            height: 100%;
            left: 50%;
            top: 0;
            transform: translateX(-50%);
        }
        
        .piece {
            position: absolute;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            top: 2px;
            left: 2px;
            z-index: 1;
        }
        
        .black {
            background: radial-gradient(circle at 30% 30%, #666, #000);
            box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
        }
        
        .white {
            background: radial-gradient(circle at 30% 30%, #fff, #ccc);
            box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
        }
        
        .controls {
            margin-top: 20px;
            display: flex;
            gap: 10px;
        }
        
        button {
            padding: 8px 16px;
            background-color: #8b4513;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        
        button:hover {
            background-color: #a0522d;
        }
        
        .status {
            margin-top: 10px;
            font-size: 18px;
            color: #8b4513;
            font-weight: bold;
            height: 24px;
        }
        
        .last-move {
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: red;
            border-radius: 50%;
            z-index: 2;
            transform: translate(-5px, -5px);
        }
    </style>
</head>
<body>
    <h1>五子棋游戏</h1>
    <div class="game-container">
        <div class="status" id="status">黑方回合</div>
        <div class="board" id="board"></div>
        <div class="controls">
            <button id="restart">重新开始</button>
            <button id="undo">悔棋</button>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const boardSize = 15;
            const board = document.getElementById('board');
            const statusDisplay = document.getElementById('status');
            const restartButton = document.getElementById('restart');
            const undoButton = document.getElementById('undo');
            
            let gameState = Array(boardSize).fill().map(() => Array(boardSize).fill(null));
            let currentPlayer = 'black';
            let gameHistory = [];
            let gameActive = true;
            
            // 初始化棋盘
            function initializeBoard() {
                board.innerHTML = '';
                
                for (let row = 0; row < boardSize; row++) {
                    for (let col = 0; col < boardSize; col++) {
                        const cell = document.createElement('div');
                        cell.classList.add('cell');
                        cell.dataset.row = row;
                        cell.dataset.col = col;
                        
                        // 添加鼠标悬停效果
                        cell.addEventListener('mouseover', function() {
                            if (!gameActive) return;
                            if (gameState[row][col] !== null) return;
                            
                            // 清除之前的预览
                            const oldPreview = document.querySelector('.preview-piece');
                            if (oldPreview) oldPreview.remove();
                            
                            // 添加新预览
                            const previewPiece = document.createElement('div');
                            previewPiece.classList.add('piece', 'preview-piece');
                            previewPiece.style.opacity = '0.5';
                            previewPiece.classList.add(currentPlayer);
                            cell.appendChild(previewPiece);
                        });
                        
                        cell.addEventListener('mouseout', function() {
                            const preview = document.querySelector('.preview-piece');
                            if (preview) preview.remove();
                        });
                        
                        cell.addEventListener('click', () => handleCellClick(row, col));
                        board.appendChild(cell);
                    }
                }
            }
            
            // 处理点击事件
            function handleCellClick(row, col) {
                if (!gameActive || gameState[row][col] !== null) return;
                
                // 保存当前状态到历史记录
                gameHistory.push({
                    state: JSON.parse(JSON.stringify(gameState)),
                    player: currentPlayer
                });
                
                // 放置棋子
                gameState[row][col] = currentPlayer;
                updateBoard();
                
                // 检查胜利条件
                if (checkWin(row, col)) {
                    gameActive = false;
                    const winner = currentPlayer === 'black' ? '黑方' : '白方';
                    statusDisplay.textContent = `${winner}获胜！`;
                    return;
                }
                
                // 检查平局
                if (checkDraw()) {
                    gameActive = false;
                    statusDisplay.textContent = '平局！';
                    return;
                }
                
                // 切换玩家
                currentPlayer = currentPlayer === 'black' ? 'white' : 'black';
                statusDisplay.textContent = `${currentPlayer === 'black' ? '黑方' : '白方'}回合`;
            }
            
            // 更新棋盘显示
            function updateBoard() {
                // 清除所有棋子
                document.querySelectorAll('.piece:not(.preview-piece)').forEach(p => p.remove());
                document.querySelectorAll('.last-move').forEach(m => m.remove());
                
                // 重新绘制所有棋子
                for (let row = 0; row < boardSize; row++) {
                    for (let col = 0; col < boardSize; col++) {
                        if (gameState[row][col] !== null) {
                            const cell = document.querySelector(`[data-row="${row}"][data-col="${col}"]`);
                            const piece = document.createElement('div');
                            piece.classList.add('piece', gameState[row][col]);
                            cell.appendChild(piece);
                        }
                    }
                }
                
                // 标记最后一步
                if (gameHistory.length > 0) {
                    const lastMove = findLastMove();
                    if (lastMove) {
                        const [row, col] = lastMove;
                        const cell = document.querySelector(`[data-row="${row}"][data-col="${col}"]`);
                        const marker = document.createElement('div');
                        marker.classList.add('last-move');
                        cell.appendChild(marker);
                    }
                }
            }
            
            // 查找最后一步
            function findLastMove() {
                if (gameHistory.length === 0) return null;
                
                const currentState = gameState;
                const prevState = gameHistory[gameHistory.length - 1].state;
                
                for (let row = 0; row < boardSize; row++) {
                    for (let col = 0; col < boardSize; col++) {
                        if (currentState[row][col] !== prevState[row][col]) {
                            return [row, col];
                        }
                    }
                }
                
                return null;
            }
            
            // 检查胜利条件
            function checkWin(row, col) {
                const directions = [
                    [0, 1],   // 水平
                    [1, 0],   // 垂直
                    [1, 1],   // 对角线
                    [1, -1]   // 反对角线
                ];
                
                for (const [dx, dy] of directions) {
                    let count = 1;
                    
                    // 正向检查
                    for (let i = 1; i <= 4; i++) {
                        const newRow = row + i * dx;
                        const newCol = col + i * dy;
                        
                        if (newRow < 0 || newRow >= boardSize || newCol < 0 || newCol >= boardSize || 
                            gameState[newRow][newCol] !== currentPlayer) {
                            break;
                        }
                        count++;
                    }
                    
                    // 反向检查
                    for (let i = 1; i <= 4; i++) {
                        const newRow = row - i * dx;
                        const newCol = col - i * dy;
                        
                        if (newRow < 0 || newRow >= boardSize || newCol < 0 || newCol >= boardSize || 
                            gameState[newRow][newCol] !== currentPlayer) {
                            break;
                        }
                        count++;
                    }
                    
                    if (count >= 5) return true;
                }
                
                return false;
            }
            
            // 检查平局
            function checkDraw() {
                return gameState.every(row => row.every(cell => cell !== null));
            }
            
            // 重新开始游戏
            function restartGame() {
                gameState = Array(boardSize).fill().map(() => Array(boardSize).fill(null));
                currentPlayer = 'black';
                gameHistory = [];
                gameActive = true;
                statusDisplay.textContent = '黑方回合';
                initializeBoard();
            }
            
            // 悔棋
            function undoMove() {
                if (gameHistory.length === 0 || !gameActive) return;
                
                const lastState = gameHistory.pop();
                gameState = lastState.state;
                currentPlayer = lastState.player;
                gameActive = true;
                statusDisplay.textContent = `${currentPlayer === 'black' ? '黑方' : '白方'}回合`;
                updateBoard();
            }
            
            // 事件监听
            restartButton.addEventListener('click', restartGame);
            undoButton.addEventListener('click', undoMove);
            
            // 初始化游戏
            initializeBoard();
        });
    </script>
</body>
</html>